<template>
  <div>
    <div class="search">
      <Row>
        <Col>
          <Card>
            <Row>
              <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                <Form-item label="项目名称" prop="">
                  <Input v-model="searchForm.project_name" style="width: 260px;"/>
                </Form-item>
                <Form-item style="margin-left:-100px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </Form-item>
              </Form>
            </Row>
            <Row class="operation">
              <Button @click="addContract" type="primary" icon="md-add">添加劳务合同</Button>
              <Button @click="editContract" type="warning" icon="ios-bookmarks-outline" >编辑劳务合同</Button>
              <Button @click="viewContract" type="success" icon="ios-bookmarks-outline" >查看劳务合同</Button>
              <Button @click="viewAttachment" type="error" icon="ios-bookmarks-outline" >附件管理</Button>
              <Dropdown @on-click="handleDropdown">
                <Button>
                  更多操作
                  <Icon type="md-arrow-dropdown" />
                </Button>
                <DropdownMenu slot="list">
                  <DropdownItem name="exportData">导出所选数据</DropdownItem>
                  <DropdownItem name="exportAll">导出全部数据</DropdownItem>
                   <!-- <DropdownItem name="editCode">修改合同编码</DropdownItem> -->
                </DropdownMenu>
              </Dropdown>
              <Button @click="refresh" icon="refresh">刷新</Button>
            </Row>
            <Row>
              <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
              </Alert>
            </Row>
            <Row>
              <Table
                border
                :loading="loading"
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-selection-change="showSelect"
                ref="table">
              </Table>
              <Table :columns="exportColumns" :data="exportData" ref="exportTable" style="display:none"></Table>
            </Row>
            <Row type="flex" justify="end" class="page">
              <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </Card>
        </Col>
      </Row>
      <addEdit :data="form" :type="showType" v-model="addEditVisiable" @on-submit="refresh"/>
      <viewContract :data="form" v-model="viewVisiable" />
      <attachment v-model="attachmentVisiable" :data="attachmentValue"/>
    </div>
  </div>
</template>
<script>
import { getFacilitatorContract, getFacilitatorContractByID } from '@/api/contract';
import util from '@/libs/util';
import addEdit from './addEdit';
import viewContract from './view';
import attachment from '../../attachment/attachmentManager';
export default {
  name: 'labor-contract-manager',
  components: {
    addEdit, viewContract, attachment
  },
  data() {
    return {
      loading: false,
      searchForm: {
        project_name: '',
        pageNumber: 1,
        pageSize: 10
      },
      attachmentValue: {},
      data: [],
      total: 0,
      selectCount: 0,
      columns: [
        {
          type: "selection",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          title: '合同编码',
          key: 'contract_code',
          width: 190
        },
        {
          title: '合同名称',
          key: 'contract_name',
          width: 260,
        },
        {
          title: '所属项目',
          key: 'project_name',
          width: 260
        },
        {
          title: '承包单位',
          key: 'name',
          width: 240,
        },
        {
          title: '合同金额',
          key: 'cost',
          width: 100,
          align: 'right'
        },
        {
          title: '签订日期',
          key: 'contract_date',
          width: 100,
          align: 'center'
        },
        {
          title: '添加人',
          key: 'real_name',
          width: 60,
          align: 'center'
        },
        
      ],
      exportData: [],
      selectList: [],
      exportColumns: [],
      addEditVisiable: false,
      viewVisiable: false,
      attachmentVisiable: false,
      showType: '',
      form: {}
    }
  },
  methods: {
    getContractList() {
      this.loading = true;
      getFacilitatorContract(this.searchForm).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.data = res.data.raws;
          this.total = res.data.count;
        }
      })
    },
    init() {
      this.getContractList();
    },
    handleSearch() {
      this.searchForm.project_name = this.searchForm.project_name.trim();
      if (this.searchForm.project_name.length > 0) {
        this.getContractList();
      } else {
        this.$Message.warning('请输入要搜索的项目名称！');
        return;
      }
    },
    handleReset() {
      this.searchForm.project_name = '';
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getContractList();
    },
    addContract() {
      const hasPermission = util.oneOf('add', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      }; 
      this.form = {};
      this.showType = '1';
      this.addEditVisiable = true;
    },
    editContract() {
      const hasPermission = util.oneOf('edit', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      };
      if (this.selectList.length !== 1) {
        this.$Message.warning('必须选择一条记录进行操作!');
        return;
      } 
      if (this.selectList[0].contract_step == 3) {
        this.$Message.error('此工程已经与用户签订了正式的合同了，不能再次编辑');
        return;
      }
      let v = this.selectList[0];
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.form = data;
      this.showType = '2';
      this.addEditVisiable = true;
    },
    viewContract() {
      if (this.selectList.length !== 1) {
        this.$Message.warning('必须选择一条记录进行操作!');
        return;
      }
      const id = this.selectList[0].id;
      getFacilitatorContractByID({id}).then(res => {
        if (res.code === 0) {
          this.form = res.data;
          this.viewVisiable = true;
        }
      });
    },
    viewAttachment() {
      if (this.selectList.length !== 1) {
        this.$Message.warning('必须选择一条记录进行操作!');
        return;
      }
      this.attachmentValue = {
        project_id: this.selectList[0].project_id,
        type: 2,
        showAll: false,
        showUploads: true
      }
      this.attachmentVisiable = true;
    },
    handleDropdown(name) {

    },
    refresh() {
      this.getContractList();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getContractList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getContractList();
    },
  },
  mounted() {
    this.init();
  }
}
</script>
<style lang="less" scoped>
@import "./laborContractManager.less";
</style>